<template>
  <!-- 底部弹出菜单列表 -->
  <div class="innerwrapper">
    <u-popup
      v-model="showPopup"
      mode="bottom"
	  @close="closeOnClickOverlay && $emit('input', false)"
    >
      <!-- 内容 -->
      <div class="popup-div">
        <!-- 头部留白 -->
        <div class="popup-div__head" />
        <!-- 菜单列表 -->
        <div class="popup-div__menu-list">
          <div
            v-for="(item, index) in menuArray"
            :key="index"
            class="popup-div__menu-list-a"
            @click="onMenuClick(item)"
          >
            <img v-if="!showBadge" :src="item.icon" alt="" />
            <u-icon v-if="showBadge" :name="item.icon" class="img" :badge="item | badgeInfo" />
            <p>{{ item[textKey] }}</p>
          </div>
        </div>
        <!-- 底部关闭图标 -->
        <div class="popup-div__footer">
          <div v-if="showCloseIcon" @click="$emit('input', false)">
            <u-icon name="cross" />
          </div>
        </div>
      </div>
    </u-popup>
  </div>
</template>

<script>
  export default {
    filters: {
      badgeInfo: (item) => {
        if (!item.badge || item.badge === '0') {
          return '';
        } else if (Number.isInteger(item.badge) && item.badge >= 100) {
          return '99+';
        } else {
          return item.badge;
        }
      }
    },
    props: {
      // 每行显示菜单个数
      colNum: {
        type: Number,
        default: 4
      },
      // 对齐方式，按照display:flex的justify-content属性配置
      direction: {
        type: String,
        default: 'space-around'
      },
      // 是否显示popup
      value: {
        type: Boolean,
        default: false
      },
      // 是否显示关闭图标
      showCloseIcon: {
        type: Boolean,
        default: true
      },
      // 是否在点击遮罩层后关闭
      closeOnClickOverlay: {
        type: Boolean,
        default: false
      },
      /**
       *  菜单信息
       *  单项item信息 => { icon:图标url, text:菜单名称, url:路由url }
       */
      menuList: {
        type: Array,
        default: () => []
      },
      // 自定义 text key
      textKey: {
        type: String,
        default: 'text'
      },
      // 是否显示徽标数
      showBadge: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        showPopup: false,
        menuArray: []
      };
    },
    watch: {
      value(nVal, oVal) {
        this.showPopup = nVal;
      },
      menuList(nVal, oVal) {
        this.menuArray = JSON.parse(JSON.stringify(this.menuList));
      }
    },
    created() {},
    mounted() {
      this.showPopup = !!this.value;
      this.menuArray = JSON.parse(JSON.stringify(this.menuList));
      const selector = document.querySelector('.innerwrapper');
      selector.setAttribute(
        'style',
        `--item-width: ${(100 / this.colNum).toFixed(2)}%;--direction: ${this.direction}`
      ); // 动态改变
    },
    methods: {
      // 菜单点击
      onMenuClick(item) {
        this.$emit('on-menu-click', item);
      },
	  closepopup() {
		  console.log('closepopup')
	  }
    }
  };
</script>

<style scoped lang="less">
  // @import '~@styles/modules/visitor/van-popup';
  .innerwrapper {
    --item-width: 25%;
    --direction: space-around;
  }
  .popup-div {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    text-align: center;

    &__head {
      height: 45px;
    }

    &__menu-list {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: var(--direction);
      min-height: 165px;
      max-height: 80vh;
      overflow-y: auto;
      text-align: center;
    }

    &__menu-list-a {
      display: inline-block;
      flex-basis: var(--item-width);
      width: 68px;
      padding: 8px;
      vertical-align: middle;

      .img,
      img {
        display: inline-block;
        width: 62px;
        height: 62px;
        vertical-align: top;
        object-fit: cover;
      }

      p {
        display: -webkit-box;
        padding: 0;
        margin: 10px 0 0 0;
        overflow: hidden;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        color: rgba(110, 110, 114, 1);
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }

    &__footer {
      height: 45px;
      padding: 10px 15px;
      line-height: 25px;

      div {
        display: inline-block;
        width: 50px;
        height: 100%;
        vertical-align: middle;
      }

      .van-icon {
        font-size: 17px;
        color: #c8c9cc;
      }
    }
  }
</style>
